<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品详情页</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/bootstrap.css">

    <style type="text/css">
        .box {
            width: 100%;
            text-align: center;
        }
        
        #main-body {
            display: inline-block;
            text-align: left;
            width: 60%;
        }
        
        .name-navigation {
            margin: 10px 0 10px 20px;
        }
        
        a {
            color: #CCCCCC;
            margin: 3px;
        }
        
        .left-right {
            display: flex;
            justify-content: space-between;
            width: 350px;
            align-items: center;
        }
        
        .margin-num {
            margin-left: 10px;
        }
        
        .top {
            display: flex;
            margin-bottom: 60px;
        }
        
        .alert-warning {
            height: 80px;
        }
        
        .top-right {
            margin-left: 40px;
            position: relative;
        }
        
        .left-img {
            margin: 10px;
        }
        
        .buy-btns {
            position: absolute;
            bottom: 10px;
            text-align: center;
            width: 100%;
        }
        
        .buy-btns .btn {
            margin-left: 10px;
        }
        
        .card-left {
            height: auto;
            border-radius: 5px;
            box-shadow: 0 3px 10px 2px #d1d1d1;
            padding: 25px;
            text-align: center;
        }
        
        .left-info {
            margin-top: 40px;
        }
        
        .info-right {
            display: flex;
            align-items: flex-start;
        }
        
        .right {
            width: 100%;
            margin-left: 20px;
        }
        
        .right>.right-top {
            border-radius: 5px;
            box-shadow: 0 3px 10px 2px #d1d1d1;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .right>.right-top>font:nth-child(2) {
            margin-left: 40px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <iframe name="header_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/header.html" frameborder=0 scrolling="no"></iframe>
    <div class="box">
        <div id="main-body">
            <div>
                <!-- 内容导航 -->
                <div class="name-navigation">
                    <a href="./index.html">首页</a>>
                    <a href="">贵州乡村振兴特产刺梨馆</a>>
                    <a href="">2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤</a>
                </div>
                <div class="top">
                    <div class="top-left">
                        <img style="width: 420px;height:420px" src="img/shopping/2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤.jpg">

                        <ul class="list-group list-group-horizontal">
                            <img style="width: 60px;height:60px" class="left-img" src="img/shopping/2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤.jpg">

                            <img style="width: 60px;height:60px" class="left-img" src="img/shopping/1.jpg">
                            <img style="width: 60px;height:60px" class="left-img" src="img/shopping/2.jpg">
                            <img style="width: 60px;height:60px" class="left-img" src="img/shopping/3.png">
                            <img style="width: 60px;height:60px" class="left-img" src="img/shopping/4.png">
                        </ul>
                    </div>
                    <div class="top-right">
                        <p><b>2022年贵州特产野生刺梨农家新鲜野山果天然食用农产品5斤</b></p>
                        <div class="alert alert-warning" role="alert" class="price-bg">
                            本店价
                            <b>
								<font size="" color="#EF500C">￥
									<font size="5px" color="">89.00</font>
								</font>
							</b>
                        </div>
                        <div class="left-right">
                            <div>
                                <font size="" color="#868686">配送至</font>
                                <button type="button" class="btn btn-outline-secondary margin-num">选择地址</button>
                            </div>
                            <div>
                                <font size="" color="#868686">库存</font>
                                <b>
									<font size="" color="#555555" class="margin-num">1999件</font>
								</b>
                            </div>
                        </div>

                        <hr>

                        <!-- <p>
							<font size="" color="#868686">口味</font>
							<button type="button" class="btn btn-outline-warning margin-num active">闪冲花神咖啡礼盒</button>
						</p> -->
                        <!-- <p>
                            <font size="" color="#868686">净含量</font>
                            <button type="button" class="btn btn-outline-warning margin-num active" id="contentone">1x12x2g</button>
                            <button type="button" class="btn btn-outline-warning margin-num" id="contenttwo">1x24x2g</button>
                        </p> -->
                        <p>
                            <font size="" color="#868686">数量</font>
                            <span class="btn-group margin-num" role="group" aria-label="Basic example">
								<button type="button" class="btn btn-outline-secondary" onclick="minus()">-</button>
								<button type="button" class="btn btn-outline-secondary" id="count">1</button>
								<button type="button" class="btn btn-outline-secondary" onclick="add()">+</button>
							</span>
                        </p>

                        <div class="buy-btns">
                            <button type="button" class="btn btn-lg btn-outline-warning">立即购买</button>
                            <button type="button" class="btn btn-lg btn-warning">加入购物车</button>
                            <button type="button" class="btn btn-lg btn-light"><img src="img/image(19).png"></button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图片详情 -->
            <div class="info-right">
                <div class="card-left">
                    <div class="hr-left">
                        <font size="" color="#CCCCCC">猜你喜欢</font>
                        <hr>
                    </div>

                    <div class="left-info">
                        <img src="img/image(6).png">
                        <div class="">
                            <font size="2" color="">NIKE 轻便减震运动鞋</font>
                        </div>
                    </div>

                    <div class="left-info">
                        <img src="img/image(12).png">
                        <div class="">
                            <font size="2" color="">NIKE 轻便减震运动鞋</font>
                        </div>
                    </div>

                    <div class="left-info">
                        <img src="img/image(8).png">
                        <div class="">
                            <font size="2" color="">NIKE 轻便减震运动鞋</font>
                        </div>
                    </div>
                </div>

                <div class="right">
                    <div class="right-top">
                        <font size="" color="#EF500C">商品详情</font>
                        <font size="" color="#CCCCCC">累计评价</font>
                        <font size="" color="#000000">1295</font>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <iframe name="footer_iframe" onload="this.height=this.contentWindow.document.body.scrollHeight" width=100% src="./components/footer.html" frameborder=0 scrolling="no"></iframe>

    <script type="text/javascript">
        var count = document.getElementById("count")
        var counttxt = count.innerText;
        var btncontentOne = document.getElementById("contentone")
        var btncontentTwo = document.getElementById("contenttwo")

        btncontentTwo.onclick = function() {
            btncontentTwo.classList.add("active")
            btncontentOne.classList.remove("active")
        }
        btncontentOne.onclick = function() {
            btncontentOne.classList.add("active")
            btncontentTwo.classList.remove("active")
        }

        function minus() {
            if (counttxt > 0) {
                counttxt--
                count.innerText = counttxt
            }
        }

        function add() {
            counttxt++
            count.innerText = counttxt
        }
    </script>
</body>

</html>